<template>
	<view class="myCrystal u-skeleton">
		<u-navbar title="" :background="{
			'backgroundColor':'#fff'
		}" :is-fixed='true' :borderBottom="false" class="u-skeleton-rect">
			<view slot='right' class="title-right" @click="$util.redirectTo('/pages/tidalcard/crystalList')">{{$store.state.bs}}记录</view>
		</u-navbar>
		<view class="top u-skeleton-rect" :style="{
			'background-image':`url(${$util.img('/static/img/grade/02.png')})`
		}">
			<view class="t-title">我的{{$store.state.bs}}</view>
			<view class="t-num">
				<image :src="$util.img('/static/img/card/宝石.png')" mode="widthFix"></image>
				<view class="num">{{amount}}</view>
			</view>
			<view class="t-tolink" @click="$util.redirectTo('/pages/tidalcard/giftCrystal')">赠送</view>
		</view>
		<view class="content" v-if="bsTitle">
			<view class="title">{{$store.state.bs}}是什么</view>
			<view class="txt"><u-parse :html="bsTitle.bs_title"></u-parse></view>
			<view class="title">如何获得{{$store.state.bs}}</view>
			<view class="txt"><u-parse :html="bsTitle.hd_title"></u-parse></view>
			
		</view>
		<u-skeleton :loading="loding" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				loding: true, //初始化骨架屏展示
				amount: 0,
				bsTitle: null,
			}
		},
		onShow() {
			this.getinfo();

		},
		methods: {
			//获取用户自己的信息
			async getinfo() {
				let boredApe = await this.$http.sendrequest({
					url: '/goods/flashcardConfig'
				});
				let bsTitle = await this.$http.sendrequest({
					url: '/common/bsTitle'
				});

				this.loding = false;
				this.amount = boredApe.data.amount;
				this.bsTitle = bsTitle.data;
			},


		}
	}
</script>

<style lang="scss" scoped>
	.myCrystal {
		.title-right {
			padding-right: 30rpx;
			font-size: 26rpx;
		}

		.top {
			width: 100%;
			height: 360rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 10% 50rpx 0;

			.t-title {
				font-size: 46rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
				color: #fff;
			}

			.t-num {
				font-size: 32rpx;
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				font-weight: bold;
				color: #fff;

				image {
					width: 40rpx;
					margin-right: 20rpx;
				}
			}

			.t-tolink {
				width: 140rpx;
				height: 50rpx;
				border: 1rpx solid #fff;
				border-radius: 4rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				color: #fff;
			}
		}

		.content {
			margin-top: 60rpx;
			padding: 30rpx;
			.title {
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			.txt{
				margin-bottom: 100rpx;
				font-size: 26rpx;
			}
		}
	}
</style>